<template>
  <div>
    <a-card hoverable class="recommond" title="友链" :head-style="headStyle">
      <div class="link-container">
        <a v-for="item in linkList" :key="item.linkId" :href="item.linkUrl" target="_blank" class="link">{{ item.linkName }}</a>
      </div>
    </a-card>
  </div>
</template>

<script>
import linkApi from '@/api/link'
export default {
  name: 'Link',
  data() {
    return {
      headStyle: {
        borderLeft: '5px solid #5396E4',
        fontSize: '18px',
        fontWeight: 'bold',
        lineHeight: '15px'
      },
      linkList: [] // 友链内容
    }
  },
  created() {
    this.getLinkList()
  },
  methods: {
    getLinkList() {
      linkApi.getAll().then(res => {
        if (res.code === 200) {
          this.linkList = res.data
        } else {
          this.$message.error(res.data)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .ant-card-bordered{
    border-bottom: none !important;
  }
.link-container{
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  .link{
    color: skyblue;
    margin-right: 15px;
  }
}
</style>
